<template>
  <div>
    <!-- 管理子用户 2018/6/4 zhangQ -->
    <Form label-position="right" inline>
      <FormItem label="子账号登录名称">
        <Input type="text" v-model="tabParam.subLoginName" placeholder="子账号登录名称"></Input>
      </FormItem>
      <Button type="primary" @click="subUserSearch" icon="ios-search">搜索</Button>
      <Button type="primary" @click="currentSubUser = {},operatModal.addSubUserShow = true">添加子用户</Button>
      <!--<Button type="primary" @click="subUserSearch" icon="ios-search">搜索</Button>-->
    </Form>

    <tablePage ref="childuserTab" :api="querySubUserByPage" sortName="loginName" :param="tabParam" :isStartLoad="false">
      <template slot-scope="props">
        <Table :columns="subUserTab.columns" :data="props.data" border></Table>
      </template>
    </tablePage>

    <xlinkModal v-model="operatModal.addSubUserShow" :title="editSubUsertitle" width="800">
      <addSubUser v-if="operatModal.addSubUserShow" :subUser="currentSubUser" @close="operatModal.addSubUserShow = false,subUserSearch()"></addSubUser>
    </xlinkModal>

  </div>
</template>

<script>
  import { querySubUserByPage, delSubUser } from '@/api/backEnd/subUer'
  import tablePage from '@/components/table/tablePage'
  import XlinkModal from '@/components/modal/xlinkModal'
  import addSubUser from './components/addSubUser'
  import { mapGetters } from 'vuex'

  export default {
    name: 'index',
    data () {
      let tabParam = { userId: '', subLoginName: '' }
      let subUserTab = {
        columns: [
          {
            title: '登录名',
            width: 150,
            key: 'loginName'
          },
          {
            title: '电话号码',
            width: 150,
            key: 'mobile'
          },
          {
            title: '真实姓名',
            width: 150,
            key: 'realName'
          },
          {
            title: '公司名称',
            width: 150,
            key: 'companyName'
          },
          {
            title: '公司法人',
            width: 150,
            key: 'legaler'
          },
          {
            title: '邮件',
            width: 250,
            key: 'email'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            minWidth: 250,
            render: (h, params) => {
              let editSubUserBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.editSubUser(params.row)}>修改</i-button>)
              let deleteSubUserBtn = (<i-button type="warning" size="small" style="margin-right: 5px;" onClick={() => this.deleteSubUser(params.row)}>删除</i-button>)
              let btnArray = []
              // powerUtil.contains('viewDetail') && btnArray.push(deleteSubUserBtn)
              btnArray.push(editSubUserBtn)
              btnArray.push(deleteSubUserBtn)
              return (btnArray)
            }
          }
        ],
        data: []
      }
      let currentSubUser = {}
      let operatModal = { addSubUserShow: false }
      let datas = { querySubUserByPage, tabParam, subUserTab, operatModal, currentSubUser }
      return datas
    },
    computed: {
      ...mapGetters(['currentUser']),
      editSubUsertitle () {
        return this.currentSubUser.id ? '修改子用户：' + this.currentSubUser.loginName : '新增用户'
      }
    },
    methods: {
      /**
       * TODO(搜索)
       * @auther zhangQ
       * @date 2018/6/4 18:56
       */
      subUserSearch () {
        this.$refs['childuserTab'].dataRefresh()
      },
      /**
       * TODO(删除子用户)
       * @auther zhangQ
       * @date 2018/6/4 18:50
       */
      deleteSubUser (subUser) {
        this.$Modal.confirm({
          title: '删除!',
          content: '<p>确认删除？</p>',
          onOk: () => {
            // 点击确定删除用户
            delSubUser({ userId: subUser.id })
              .then(res => {
                if (+res.data.isSuccess === 1) {
                  this.$Notice.success({
                    title: '删除成功'
                  })
                  this.subUserSearch()
                } else {
                  this.$Notice.error({
                    title: '删除失败',
                    desc: res.data.res
                  })
                }
              })
          },
          onCancel: () => {
            // 取消删除
            // this.$Message.info('Clicked cancel')
          }
        })
      },
      /**
       * TODO(编辑子用户)
       * @auther zhangQ
       * @date 2018/6/4 18:58
       */
      editSubUser (subUser) {
        console.log('subUser', subUser)
        this.currentSubUser = subUser
        this.operatModal.addSubUserShow = true
      }
    },
    created () {
    },
    mounted () {
      setTimeout(() => {
        this.tabParam.userId = this.currentUser.userId
        this.subUserSearch()
      }, 200)
    },
    components: { tablePage, XlinkModal, addSubUser }
  }
</script>

<style scoped>

</style>
